<!-- 关于用户信息弹窗 -->
<template>
  <el-dialog
    :title="title"
    :visible="visible"
    class="addUser"
    :close-on-click-modal="false"
    @close="clearUser(refName)"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      :ref="refName"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名称" prop="username" class="addUser-inline">
        <el-input
          v-model="ruleForm.username"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="真实姓名"
        prop="real_name"
        class="addUser-inline right"
      >
        <el-input
          v-model="ruleForm.real_name"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender" class="addUser-inline">
        <el-select v-model="ruleForm.gender" placeholder="请选择性别">
          <el-option label="保密" value="UNKNOWN"></el-option>
          <el-option label="男" value="MALE"></el-option>
          <el-option label="女" value="MALE"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age" class="addUser-inline right">
        <el-input-number
          v-model="ruleForm.age"
          controls-position="right"
          :min="16"
          :max="70"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="身份" prop="authority">
        <el-select
          v-model="ruleForm.authority"
          placeholder="请选择用户身份"
          :disabled="disable"
        >
          <el-option label="求职者" value="USER"></el-option>
          <el-option label="管理员" value="ADMIN"></el-option>
          <el-option label="商户" value="MERCHANT"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在单位" prop="common_name">
        <el-input
          v-model="ruleForm.common_name"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="学院名"
        prop="department"
        v-show="ruleForm.authority == 'USER'"
      >
        <el-input
          v-model="ruleForm.department"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="班级"
        prop="class_name"
        v-show="ruleForm.authority == 'USER'"
      >
        <el-input
          v-model="ruleForm.class_name"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="phone_number">
        <el-input
          v-model="ruleForm.phone_number"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model="ruleForm.email" autocomplete="new-password">
        </el-input>
      </el-form-item>
      <el-form-item label="QQ号码" prop="qq_number">
        <el-input
          v-model="ruleForm.qq_number"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item label="微信号码" prop="wechat_number">
        <el-input
          v-model="ruleForm.wechat_number"
          autocomplete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="new-password"
          show-password
          placeholder="默认密码111111"
        ></el-input>
      </el-form-item>
      <el-form-item label="自我介绍" prop="description">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="ruleForm.description"
          maxlength="50"
          show-word-limit
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="clearUser(refName)">取 消</el-button>
      <el-button
        type="primary"
        @click="addUser(refName)"
        v-if="!loading && refName == 'addUser'"
        >确 定</el-button
      >
      <el-button
        type="primary"
        @click="changeUser(refName)"
        v-if="!loading && refName == 'changeUser'"
        >确 定</el-button
      >
      <el-button type="primary" :loading="true" v-if="loading"
        >加载中</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { mapActions } from "vuex";
import {
  addUser,
  changeUser,
  clearUser,
  isCellPhone,
  refreshData,
  is_Contains,
} from "@/assets/js/adminPerson.js";
export default {
  props: {
    refName: String,
    title: String,
    ruleForm: Object,
    loading: Boolean,
    visible: Boolean,
    disable: Boolean,
  },
  data() {
    var username = async(rule, value, callback) => {
      const response = await this.is_Contains("username", value);
      if (response.message) {
        callback(new Error(response.message));
      } else {
        callback();
      }
    };
    var checkphone =async (rule, value, callback) => {
      // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value == "") {
        callback(new Error("请输入手机号"));
      } else if (!this.isCellPhone(value)) {
        //引入methods中封装的检查手机格式的方法
        callback(new Error("请输入正确的手机号!"));
      } else {
        const response =await this.is_Contains("phone_number", value);
        if (response.message) {
          callback(new Error(response.message));
        } else {
          callback();
        }
      }
    };
    var is_email = async(rule, value, callback) => {
      const response =await this.is_Contains("email", value);
      if (response.message) {
        callback(new Error(response.message));
      } else {
        callback();
      }
    };
    return {
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 2, message: "长度不少于2个字符", trigger: "blur" },
          { validator: username, trigger: "blur" },
        ],
        phone_number: [
          { required: true, validator: checkphone, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
          { validator: is_email, trigger: "blur" },
        ],
        authority: {
          required: true,
          message: "请选择用户身份",
          trigger: "blur",
        },
        real_name: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          {
            min: 2,
            max: 5,
            message: "长度在2到5个字符，不能包含空格",
            trigger: "blur",
          },
        ],
        common_name: {
          required: true,
          message: "请输入学校名称",
          trigger: "blur",
        },
        department: { message: "请输入学院名", trigger: "blur" },
        class_name: { message: "请输入班级名", trigger: "blur" },
        description: [
          {
            required: true,
            message: "请输入自我介绍，内容不少于20字",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "年龄不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    ...mapActions("admin", [
      "increaseUser",
      "reviseUser",
      "gainUser",
      "changePage",
    ]),
    addUser,
    clearUser,
    isCellPhone,
    refreshData,
    changeUser,
    is_Contains,
  },
};
</script>

<style lang='scss' scoped>
</style>
